<template>
    <div class="shop">
        <el-button size="mini" type="primary" @click="exportRefundTaxData">导出数据</el-button>
        <el-button size="mini" type="primary" @click="searchRefundTaxData" style="float:right;">搜索</el-button>

        <el-input style="width:164px;float:right;margin-left:12px;" v-model="keywords" size="mini" placeholder="输入申请用户手机号搜索"></el-input>
        <el-select size="mini" v-model="status" style="float:right;width:120px;" placeholder="状态">
            <el-option label="全部" value="4"></el-option>
            <el-option label="申请中" value="0"></el-option>
            <el-option label="已打款" value="1"></el-option>
            <el-option label="已取消" value="2"></el-option>
        </el-select>

                    <el-table
      :data="tableData"
      style="width:100%;margin:20px;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="申请时间" prop="operate_time"></el-table-column>
      <el-table-column label="申请用户账号" prop="username"></el-table-column>
      <el-table-column label="退税金额(元)" >
          <template slot-scope="scope">
              <p v-if="scope.row.money">¥ {{scope.row.money}}</p>
              <p v-else>---</p>
          </template>
      </el-table-column>
      <el-table-column label="快递面单号" prop="express_no"></el-table-column>
      <el-table-column label="状态">
          <template slot-scope="scope">
              <p v-if="scope.row.status == 0">申请中</p>
              <p v-if="scope.row.status == 1">已打款</p>
              <p v-if="scope.row.status == 2">已取消</p>
          </template>
      </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <p v-if="scope.row.status == 0" style="color:blue;cursor:pointer;" @click="lookTaxRefund(1,scope.row.id)">打款</p>
              <p v-else style="color:blue;cursor:pointer;" @click="lookTaxRefund(2,scope.row.id)">查看</p>
          </template>
      </el-table-column>
    </el-table>
     <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!--退税申请详情-->
      <jdialog title="退税申请详情" :visible.sync='isShowRefundTax' width='720px'>
        <div style="padding:20px 16px;">
         <p class="baseInfo">| 基本信息</p>
         <div style="margin:18px 0;height:60px;">
            <el-col :span="12" style="margin-bottom:20px;">
                <span style="color:#999999;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;申请时间:</span>
                <span style="font-size:13px;font-weight:600;margin-left:14px;">{{tax_deduct_info.created_at}}</span>
            </el-col>
            <el-col :span="12" style="margin-bottom:20px;">
                <span style="color:#999999;font-size:12px;">申请用户账号:</span>
                <span style="font-size:13px;font-weight:600;margin-left:14px;">{{tax_deduct_info.username}}</span>
            </el-col>
            <el-col :span="12" style="margin-bottom:20px;">
                <span style="color:#999999;font-size:12px;">申请退税金额:</span>
                <span style="font-size:13px;font-weight:600;margin-left:14px;">￥{{tax_deduct_info.money}}</span>
            </el-col>
            <el-col :span="12" style="margin-bottom:20px;">
                <span style="color:#999999;font-size:12px;">&nbsp;&nbsp;&nbsp;快递面单号:</span>
                <span style="font-size:13px;font-weight:600;margin-left:14px;">{{tax_deduct_info.express_no}}</span>
            </el-col>
         </div>
         <p class="baseInfo">| 退税金额明细</p>
         <el-table :data="tax_info"
      style="width:100%;margin:14px;padding:0 32px 0 0;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
         <el-table-column label="提现时间" prop="created_at"></el-table-column>
         <el-table-column label="提现用户账号" prop="username"></el-table-column>
         <el-table-column label="提现金额">
             <template slot-scope="scope">
                 <p v-if="scope.row.money_apply">¥ {{scope.row.money_apply}}</p>
                 <p v-else>---</p>
             </template>
         </el-table-column>
         <el-table-column label="代扣税比例" >
             <template slot-scope="scope">
                 <p v-if="scope.row.tax_rate">{{scope.row.tax_rate}}%</p>
                 <p v-else>---</p>
             </template>
         </el-table-column>
         <el-table-column label="代扣税费">
             <template slot-scope="scope">
                 <p v-if="scope.row.tax_fee">¥ {{scope.row.tax_fee}}</p>
                 <p v-else>---</p>
             </template>
         </el-table-column>
         </el-table>

         <p class="baseInfo">| 打款操作</p>
         <el-col style="margin:20px 0;" :span="9">
             <el-radio-group v-model="detail_status"  :disabled="type !== 1">
              <el-radio label="2">拒绝打款（关闭）</el-radio>
              <el-radio label="1">同意打款</el-radio>
        </el-radio-group>
         </el-col>
         
         <el-col :span="12" style="margin:16px 0;">
             <el-input size="mini" style="width:142px;" placeholder="请输入打款金额" :disabled="type !== 1" v-model="money_actual"></el-input>
         </el-col>
         
         <div style="text-align:center;margin:72px 0 10px 0;">
             <el-button size="mini" @click="cancelDetail">取消</el-button>
             <el-button size="mini" type="primary" @click="certainDetail">确认</el-button>
         </div>
        </div>
      </jdialog>
    </div>
</template>

<script>
import {taxDeductRecord , taxDeductDetail ,taxDeductOperate} from '@/api/finance'
import { API_BASE_URL } from "@/config";
export default {
    data () {
       return {
         keywords:'',
         status:'',
         export:0,
         total:0,
         size:20,
         page:1,
         tableData:[],

        isShowRefundTax:false,
        type:1,
        tax_info:[],
        tax_deduct_info:{},
        detail_status:'',
        currentId:'',
        money_actual:'',
       }
    },
    created () {
      this.gettaxDeductRecordData()
    },
    methods:{
      //导出数据
      exportRefundTaxData(){
        this.export = 1
        this.gettaxDeductRecordData()
      },
      //搜索
      searchRefundTaxData () {
         this.gettaxDeductRecordData()
      },
      pageChange (page){
        this.page = page
        this.gettaxDeductRecordData()
      },
      lookTaxRefund(type ,id){
       this.type = type;
       this.currentId = id
       this.gettaxDeductDetailData()
      },
      //取消
      cancelDetail () {
        this.isShowRefundTax = false
      },
      //确认
      certainDetail () {
        if(this.type == 1){
         if(!this.detail_status){
            this.$message.error('请选择打款操作')
            return
          }
          if(!this.money_actual && this.detail_status == 1){
            this.$message.error('金额不能为空')
            return
          }
       this.gettaxDeductOperateData()
        }else{
           this.isShowRefundTax = false
        }
      },
      async gettaxDeductRecordData () {
          if(this.status == 4){
              this.status = ''
          }
        var form  = {
            status:this.status,
            keywords:this.keywords,
            export:this.export,
            page:this.page,
            size:this.size,
        }
       let res = await taxDeductRecord(form)
       if(res.code === 10000){
            if(this.export == 1){
        this.export = 0
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
            }else{
            this.tableData = res.data.data
            this.total  = res.data.total
            }
         }else {
            this.$message.error(res.message)
         }
      },

      // 申请抵扣记录详情
      async  gettaxDeductDetailData(){
        let res = await  taxDeductDetail({tax_deduct_id:this.currentId})
        if(res.code == 10000){
           this.isShowRefundTax = true
           this.tax_info = res.data.tax_info
           this.tax_deduct_info = res.data.tax_deduct_info
        }else{
            this.$message.error(res.message)
        }
      },

      //申请抵扣税审核
      async gettaxDeductOperateData(){
         let res = await taxDeductOperate({
             tax_deduct_id:this.currentId,
             status:this.detail_status,
             money_actual:this.money_actual
         })

         if(res.code === 10000){
             this.$message.success(res.message)
             this.isShowRefundTax = false
             this.gettaxDeductRecordData()
         }else{
             this.$methods.error(res.methods)
         }
      },
      tc() {
      return "text-align:center; color:#333333; font-size:12px;";
       },
       tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
       },
    }
}
</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;
    .pagination{
        float: right;
    }
    .baseInfo{
        color: #333;
        font-size: 16px;
        font-weight: 700;
    }
}
</style>